<template>
  <div class="app main">
    <div class="title">SME管理</div>

    <div class="headerInput">
      <a-form layout="inline" style="width:100%">
        <a-form-item label="UserName">
          <a-input placeholder v-model.trim="DUserName" allowClear />
        </a-form-item>
        <a-form-item label="Class">
          <a-select v-model="DClassName" style="width: 120px" allowClear>
            <a-select-option
              v-for="(item, index) in ClassInfo"
              :key="index"
              :value="item"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Department">
          <a-select v-model="DDeptId" style="width: 120px" allowClear>
            <a-select-option
              v-for="(item, index) in DepartmentInfo"
              :key="index"
              :value="item.DeptId"
            >{{ item.DeptName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="ml300">
          <a-button type="primary" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="add">Add</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="reset">
            <a-icon type="delete" />Reset
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column key="NTID" title="NTID" data-index="NTID" />
        <a-table-column key="UserName" title="UserName" data-index="UserName" />
        <a-table-column key="DeptName" title="DeptName" data-index="DeptName" />
        <a-table-column key="ClassName" title="ClassName" data-index="ClassName" />
        <a-table-column key="Professional" title="Professional" data-index="Professional" />
        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <span>
              <a-button type="primary" @click="editMoudule(text,record)">Edit</a-button>
              <a-button
                type="primary"
                style="margin-left:50px;"
                @click="delMoudule(text,record)"
              >Delete</a-button>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>
    <!-- 弹窗部分 -->
    <a-modal
      v-model="moudelVisible"
      :title="ModalTitle"
      @ok="handleOk"
      @cancel="cancleSubmit"
      :maskClosable="false"
    >
      <div>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="Head portrait">
            <headImgUpload @getAvatar="getAvatar" :propImageUrl="HeadPortrait"></headImgUpload>
          </a-form-item>

          <a-form-item label="UserName" v-if="doType==='add'">
            <a-select
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              allowClear
              @change="userNameChange"
            >
              <a-select-option
                v-for="(item, index) in UserNoSmeInfo"
                :key="index"
                :value="index"
              >{{ item.UserName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="UserName" v-if="doType==='edit'">
            <a-input placeholder disabled v-model="UserName" />
          </a-form-item>
          <a-form-item label="NTID">
            <a-input :disabled="true" placeholder v-model.trim="NTID" />
          </a-form-item>
          <!-- <a-form-item label="NTID" v-if="doType==='add'">
            <a-input placeholder v-model="NTID" />
          </a-form-item>-->

          <a-form-item label="Department">
            <a-select v-model="DeptId" allowClear>
              <a-select-option
                v-for="(item, index) in DepartmentInfo"
                :key="index"
                :value="item.DeptId"
              >{{ item.DeptName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="Class">
            <a-select v-model="ClassName" allowClear>
              <a-select-option
                v-for="(item, index) in ClassInfo"
                :key="index"
                :value="item "
              >{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="Professional">
            <a-textarea
              placeholder
              v-model="Professional"
              style="min-height:88px;"
              :auto-size="{ minRows: 10 }"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import headImgUpload from '@/components/upload/AvatarUpload'
export default {
  data() {
    return {
      searchText: '',
      tableData: [],
      totalCount: 0,
      currentPage: 1,
      pageSize: 20,
      NTID: '',
      passWord: 'esrp123456',
      UserName: '',
      IsSME: 0,
      RoleId: '',
      ModalTitle: '',
      IsEnabled: 1, //0 不可用 1 可用
      doType: '',
      moudelVisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      DepartmentInfo: [],
      DeptId: '',
      DeptName: '',
      ClassName: '',
      Professional: '',
      HeadPortrait: '',
      ClassInfo: ['Common', 'Operation', 'Material', 'Engineering'],
      DUserName: '',
      DClassName: '',
      DDeptName: '',
      DDeptId: '',
      UserNoSmeInfo: [],
    }
  },
  watch: {
    IsEnabled() {},
    DDeptId() {
      this.getTableData()
    },
    DClassName() {
      this.getTableData()
    },
    DUserName() {
      this.debounce()
    },
  },
  created() {
    this.getTableData()
    this.getDepartmentInfo()
    this.getUserBYNoSme()
  },
  components: {
    headImgUpload,
  },
  methods: {
    reset() {
      this.DUserName = ''
      this.DClassName = ''
      this.DDeptName = ''
      this.DDeptId = ''
      this.debounce()
    },
    userNameChange(e) {
      let index = Number(e)
      this.NTID = this.UserNoSmeInfo[index].NTID
      this.UserName = this.UserNoSmeInfo[index].UserName
      console.log('userNameChange :>> ', e)
    },

    debounce() {
      setTimeout(() => {
        this.getTableData()
      }, 800)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
      let index = Number(value)
      this.DeptName = this.UserNoSmeInfo[index].DeptName
      this.DeptId = this.UserNoSmeInfo[index].DeptId
      this.UserName = this.UserNoSmeInfo[index].UserName
      this.ClassName = this.UserNoSmeInfo[index].ClassName
      this.NTID = this.UserNoSmeInfo[index].NTID
      console.log('this.UserNoSmeInfo[index] :>> ', this.UserNoSmeInfo[index])
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    getUserBYNoSme() {
      let userInfo = JSON.parse(sessionStorage.getItem('BackUserInfo'))
      console.log('userInfo :>> ', userInfo)
      const a = {
        method: 'SysUser_Que',
        userId: userInfo.NTID || '1',
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        this.UserNoSmeInfo = result.data.length > 0 ? result.data : []
        console.log('this.UserList :>> ', this.UserNoSmeInfo)
      })
    },
    getAvatar(e) {
      console.log('e :>> ', e)
      this.HeadPortrait = e
    },

    cancleSubmit() {
      this.DeptName = ''
      this.DeptId = ''
      this.RoleName = ''
      this.RoleId = ''
    },
    getDepartmentInfo() {
      let data = {}
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        queMode: 'OR',
        limit: this.pageSize,
        datas: data,
      }
      this.$post(a).then((result) => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
      })
    },
    // 查询
    getTableData() {
      const a = {
        method: 'SysUserSme_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        limit: this.pageSize,
        orderByList: 'UserName',
        datas: {
          UserName: this.DUserName ? '%' + this.DUserName + '%' : '',
          ClassName: this.DClassName,
          DeptId: this.DDeptId,
        },
      }
      this.$post(a).then((result) => {
        this.tableData = result.data.length > 0 ? result.data : []
        this.totalCount = result.count
      })
    },
    checkIsEnadble(e) {
      this.IsEnabled = e.target.checked === true ? 1 : 0
      console.log('e :>> ', this.IsEnabled)
    },
    checkIsSME(e) {
      this.IsSME = e.target.checked === true ? 1 : 0
      console.log('e :>> ', e)
    },

    search() {
      this.currentPage = 1

      this.getTableData()
    },
    add() {
      this.doType = 'add'
      // 清空参数
      this.NTID = ''
      this.DeptId = ''
      this.UserName = ''
      this.ClassName = ''
      this.DeptName = ''
      this.HeadPortrait = ''
      this.Professional = ''
      this.ModalTitle = 'Add SME'
      this.moudelVisible = true
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    // 编辑模组
    editMoudule(item, index) {
      this.doType = 'edit'
      this.ModalTitle = 'Edit SME'
      this.ModuleTipIndex = index
      console.log('item :>> ', item)
      this.NTID = item.NTID
      this.UserName = item.UserName
      this.DeptId = item.DeptId
      this.DeptName = item.DeptName
      this.ClassName = item.ClassName
      this.Professional = item.Professional
      this.HeadPortrait = item.HeadPortrait
      this.moudelVisible = true
    },
    //删除模组
    delMoudule(item, index) {
      console.log(item, 'del')
      const that = this
      this.doType = 'del'
      const a = {
        method: 'SysUserSme_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          NTID: item.NTID,
        },
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getTableData()
            }
          })
        },
        onCancel() {},
      })
    },
    changePage(current, pageSize) {
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },

    addInfo() {
      const a = {
        method: 'SysUserSme_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          // UserName: this.UserName,
          NTID: this.NTID,
          ClassName: this.ClassName,
          Professional: this.Professional,
          HeadPortrait: this.HeadPortrait,
          DeptId: this.DeptId,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getTableData()
        }
      })
    },
    editInfo() {
      const a = {
        method: 'SysUserSme_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          NTID: this.NTID,
          ClassName: this.ClassName,
          Professional: this.Professional,
          HeadPortrait: this.HeadPortrait,
          DeptId: this.DeptId,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getTableData()
        }
      })
    },
    handleOk() {
      if (!this.NTID && this.doType === 'add') {
        this.$message.warn('Please enter the NTID')
        return
      } else if (!this.UserName) {
        this.$message.warn('Please enter the user name')
        return
      } else if (!this.DeptId) {
        this.$message.warn('Please Select the Department')
        return
      } else if (!this.ClassName) {
        this.$message.warn('Please Select the Class')
        return
      }
      if (this.doType === 'edit') {
        this.editInfo()
      } else if (this.doType === 'add') {
        this.addInfo()
      }
      this.moudelVisible = false
    },
  },
}
</script>

<style lang="less" scoped>
.inline {
  display: inline-block;
}
.main {
  padding: 30px;
  padding-top: 50px;
}
.headerInput {
  display: flex;
  width: 100%;
  align-items: center;
  .searchInputBox {
    input {
      width: 280px;
    }
  }
  .ml300 {
    margin-left: 180px;
  }
  .ml50 {
    margin-left: 28px;
  }
}
.tableSection {
  margin-top: 30px;
  clear: both;
}
.pagination {
  margin-top: 38px;
  position: absolute;
  right: 100px;
}
.app {
  background: white;
}

.ml55 {
  margin-left: 76.8px;
}
</style>